<template>
  <div id="My">
    <router-link v-if="!user.userid||!user.userword" to="/Register">
      <button class="Register">请登录</button>
    </router-link>
    <div v-else>
      <app-header :name="name"></app-header>
      <div class="my_headers">
        <div class="user_set">
          <span class="fa fa-cog"></span>
          账号管理
        </div>
        <div class="user_info">
          <div class="avater_wrap">
            <div class="image"></div>
          </div>
          <div class="personal_wrap">
            <ul>
              <li class="name_wrap">
                <span>{{myuser.user_name}}<i class="fa fa-pencil-square"></i></span>
                <mt-badge size="large" color="rgba(0,0,0,.3)"><i class="fa fa-motorcycle"></i>99</mt-badge>
              </li>
              <li class="userid"> 用户名：{{user.userid}}</li>
              <li class="hor_tips">
                <mt-badge size="large" color="rgba(0,0,0,.3)">积分:{{myuser.user_integral}}</mt-badge>
                <mt-badge size="large" color="rgba(0,0,0,.3)">信用:{{myuser.user_credit}}</mt-badge>
              </li>
            </ul>
          </div>
        </div>
        <div class="inner">
          <div class="plus_title">
            <div class="plus_img"></div>
            <div class="plus_cont">
              <span class="plus_details">享最高10倍积分返利</span>
              <span class="plus_subtitle">立即查看</span>
            </div>
          </div>
        </div>
      </div>
      <div class="my_order">
        <imageText :ulW4="'ulw4'" :myOrder="data.myorder"></imageText>
      </div>
      <div class="my_line">
        <imageText :Red="'red'" :number="myuser.myDiscountCoupon" :myOrder="data.myLine1"></imageText>
        <imageText :Red="'red'" :myOrder="data.myLine2"></imageText>
        <imageText :Red="'red'" :number="myuser.myFortunellaVenosa" :myOrder="data.myLine3"></imageText>
        <imageText :Red="'red'" :number="myuser.myRedPacket" :myOrder="data.myLine4"></imageText>
        <imageText :Red="'red'" :myOrder="data.myLine5"></imageText>
      </div>
      <div class="my_favor">
        <imageText :number="myuser.myCommodity" :myOrder="data.myFavor1"></imageText>
        <imageText :number="myuser.myStore" :myOrder="data.myFavor2"></imageText>
        <imageText :number="myuser.myFootprint" :myOrder="data.myFavor3"></imageText>
      </div>
      <div class="tools_container">
        <imageText :jcc="'jcc'" :ulW4="'ulw4'" :myOrder="data.toolsItem"></imageText>
      </div>
      <div class="service">客户服务</div>
      <div class="recommend">
        <div class="title">
          <span><i class="left"></i>为你推荐<i class="right"></i></span>
          <div></div>
        </div>
        <div class="productList">
          <productList :ulw2="'ulW2'" :productList="data.productList"></productList>
        </div>
      </div>
      <div class="footer">
        <ul class="myFooter">
          <li>{{user.userid}}</li>
          <li @click="out">退出</li>
          <li>客户服务</li>
          <li>返回顶部</li>
        </ul>
        <div class="download">
          <ul v-for="(item, index) in download" :key="index">
            <li><img :src="item.ico" alt="" srcset=""></li>
            <li>{{item.txt}}</li>
          </ul>
        </div>
      </div>
      <app-footer></app-footer>

    </div>
  </div>
</template>

<script>
import Header from '@/components/Common/Header'
import Footer from '@/components/Common/Footer'
import imageText from '@/components/My/module/ImageTop1-TextBottom1'
import productList from '@/components/My/module/ProductList'

export default {
  name: 'My',
  components: {
    imageText,
    productList,
    'app-header': Header,
    'app-footer': Footer
  },
  data () {
    return {
      data: '',
      name: '个人中心',
      user: {
        userid: '',
        userword: ''
      },
      myuser: {
        user_name: '游客',
        user_integral: '1000',
        user_credit: '100',
        myDiscountCoupon: 0,
        myFortunellaVenosa: 888,
        myRedPacket: 0,
        myCommodity: 0,
        myStore: 0,
        myFootprint: 0
      },
      download: [
        { ico: '../../static/image/my/list/ico/APP.png', txt: '客户端' },
        { ico: '../../static/image/my/list/ico/国际.png', txt: '国际端' },
        { ico: '../../static/image/my/list/ico/PC.png', txt: '电脑端' }
      ]
    }
  },
  mounted () {
    this.getdata()
  },
  created () {
    if (localStorage.getItem('user')) {
      this.user = JSON.parse(localStorage.getItem('user'))
    }
  },
  methods: {
    getdata () {
      this.axios.get('../../static/json/data.json').then(item => {
        this.data = item.data.data
        console.log(this.data)
      })
    },
    out () {
      localStorage.clear()
      location.assign(location)
    }
  }
}
</script>

<style lang="less">
.myuser {
  background: rgba(0, 0, 0, 0);
}
.myuser span {
  background: linear-gradient(
    left,
    rgba(255, 0, 0, 0.9),
    rgba(0, 255, 0, 0.9)
  ) !important;
  color: rgba(0, 0, 0, 0) !important;
  -webkit-background-clip: text !important;
  font-size: 48px !important; /*px*/
  font-weight: 900 !important;
  font-family: "楷体" !important;
}
#My {
  font-size: 24px;
  background: rgba(225, 225, 225, 0.8);
  .Register {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px; /*px*/
    padding: 5px 20px;
    background: rgba(255, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
  }
  .my_headers {
    border-bottom-right-radius: 375px 30px;
    border-bottom-left-radius: 375px 30px;
    overflow: hidden;
    background: linear-gradient(
      top,
      rgba(255, 0, 0, 0.9),
      rgba(255, 200, 200.9)
    );
    margin: 0 0 30px 0;
    .user_set {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 70px;
      line-height: 70px;
      padding: 0 50px 0 0;
      span {
        padding: 0 10px;
      }
    }
    .user_info {
      display: flex;
      color: rgba(255, 255, 255, 1);
      .avater_wrap {
        width: 120px;
        height: 120px;
        margin: 0 5%;
        .image {
          width: 120px;
          height: 120px;
          border-radius: 50%;
          background: url(../../static/image/my/l5.jpg) no-repeat;
          background-size: 100%;
        }
      }
      .personal_wrap {
        font-size: 24px; /*px*/
        width: 100%;
        ul {
          li {
            height: 40px;
          }
          .name_wrap {
            display: flex;
            align-items: center;
            span {
              margin: 0 15px 0 0;
            }
            span:nth-of-type(1) {
              i {
                margin: 0 0 0 15px;
              }
            }
            span:nth-of-type(2) {
              i {
                margin: 0 10px 0 0;
              }
            }
          }
          .userid {
            color: rgba(225, 225, 225, 0.8);
          }
          .hor_tips {
            span {
              margin: 0 15px 0 0;
            }
          }
        }
      }
    }
    .inner {
      .plus_title {
        border-radius: 30px 30px 0 0;
        display: flex;
        color: rgba(255, 255, 0, 1);
        margin: 0 5%;
        width: 90%;
        height: 60px;
        line-height: 40px;
        padding: 10px 15px;
        background: rgba(55, 0, 55, 0.7);
        .plus_img {
          height: 40px;
          width: 150px;
          background: url(../../static/image/my/plus.png) center no-repeat;
          background-size: 100%;
        }
        .plus_cont {
          display: flex;
          justify-content: space-between;
          width: 100%;
          margin: 0 20px;
        }
      }
    }
  }
  .my_order,
  .my_line,
  .my_favor,
  .tools_container {
    background: rgba(255, 255, 255, 1);
    margin: 0 0 30px 0;
  }
  .my_line,
  .my_favor {
    display: flex;
  }
  .service {
    background: rgba(255, 255, 255, 1);
    padding: 10px 0 10px 10px;
    height: 80px;
    line-height: 60px;
    font-size: 28px;
  }
  .recommend {
    .title {
      padding: 20px;
      position: relative;
      text-align: center;
      div {
        width: 100%;
        position: absolute;
        top: 50%;
        height: 1px;
        border: 1px solid rgba(100, 100, 100, 1);
      }
      span {
        position: relative;
        z-index: 99;
        padding: 0 25px;
        background: rgba(225, 225, 225, 1);
        i {
          display: inline-block;
          width: 8px;
          height: 8px;
          transform: rotate(45deg) translateY(-50%);
          position: absolute;
          background: rgba(100, 100, 100, 1);
          top: 50%;
        }
        .left {
          left: 0;
        }
        .right {
          right: 0;
        }
      }
    }
  }
  .footer {
    background: rgba(255, 255, 255, 1);
    .myFooter {
      width: 100%;
      padding: 30px 0;
      display: flex;
      justify-content: space-around;
      border-bottom: 1px solid rgba(155, 155, 155, 1);
      li {
        text-align: center;
        width: 25%;
        border-right: 1px solid rgba(88, 88, 88, 1);
      }
      li:nth-of-type {
        border: none;
      }
    }
    .download {
      padding: 15px 0;
      display: flex;
      justify-content: space-between;
      ul {
        width: 33.33%;
        li {
          display: flex;
          justify-content: center;
          img {
            height: 64px;
          }
        }
      }
    }
  }
}
</style>
